<template>
  <div id="chat-list-page"
       v-loading="isLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div id="shop-chat-list" :style="{height:listHeight+'px'}">
      <div class="title">会话记录</div>
      <div class="item" @click="detail(currSession,index)" v-for="(currSession,index) in chatSessionList" :class="{curr:currSessionId===currSession.id}">
        <div class="logo-box">
          <img :src="currSession.fromIcon"/>
        </div>
        <div class="info-box">
          <div class="row1">
            <div class="shop-name" v-text="currSession.fromUserName"></div>
            <div class="last-time" v-text="currSession.lastMessageTime"></div>
            <div class="c"></div>
          </div>
          <div class="row2">
            <div class="last-message" v-text="currSession.lastMessage"></div>
            <div class="un-read-nums">
              <span v-if="currSession.unReadNums>0 && currSessionId!==currSession.id" v-text="currSession.unReadNums"></span>
            </div>
            <div class="c"></div>
          </div>
        </div>
      </div>
      <div v-if="chatSessionList.length===0" style="height: 50px; line-height: 50px; color: #888888">
        <span class="no-data">暂无会话...</span>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: 'ChatSessionList',
  props:{
    changeSession:Function
  },
  data: function () {
    return {
      listHeight:500,
      isLoading: false,
      chatSessionList: [
        // {
        //   'id': 2,
        //   'userId': 22,
        //   'userType': 'Member',
        //   'fromId': 7,
        //   'fromUserType': 'Shop',
        //   'fromIcon': 'http://image.yangfankj.com/shop/logo/7.jpg',
        //   'fromName': '唐久便利',
        //   'lastMessage': '测试432',
        //   'unReadNums': 4,
        //   'lastMessageTime': '2022-08-29 04:43:39'
        // },
        // {
        //   'id': 4,
        //   'userId': 22,
        //   'userType': 'Member',
        //   'fromId': 5,
        //   'fromUserType': 'Shop',
        //   'fromIcon': 'http://image.yangfankj.com/shop/logo/5.jpg',
        //   'fromName': '邢攀五金店',
        //   'lastMessage': '试一下828',
        //   'unReadNums': 2,
        //   'lastMessageTime': '2022-08-29 05:41:41'
        // }
      ],
      currSessionId:-1,
    }
  },
  watch:{
    $route:function () {
      this.getChatSessionList()
    }
  },
  destroyed() {
    this.bus.$off('NewSocketMessage')
  },
  mounted () {
    let $this=this
    $this.getTableHeight()
    $this.getChatSessionList()
    $this.bus.$on('NewSocketMessage',function () {
      $this.getChatSessionList()
    })
  },
  methods: {
    detail: function (session,index) {
      this.chatSessionList[index].unReadNums=0
      if (typeof this.$props.changeSession==='function'){
        this.$props.changeSession(session)
        this.currSessionId=session.id
      }
    },
    getTableHeight:function () {
      var height=this.getWinSize().height-160
      this.listHeight=height>500?height:500
    },
    getChatSessionList:function () {
      let $this=this
      $this.MyRequest(this.ApiDoNameSupplier+'Home/chatMessageSessionList',{},function (data) {
        $this.chatSessionList=data
      })
    }
  }
}
</script>

<style scoped>

</style>
